<template>
  <my-navigation-bar :my-style='style'>编辑信息</my-navigation-bar>
  <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '38rpx'}:''"></text>
  <view v-if="flag">
    <view class="edit-box" :style="flag?{marginTop: '180rpx'}:''">
      <view class="top-box">
        <text class="save">保存</text>
        <text class="icon-xiangji1"></text>
        <view class="image-box">
          <image src="../../static/image/person/babyboy.png" mode=""></image>
        </view>
      </view>
      <view class="form-box">
        <view class="item-box">
          <view class="left">
            生日
          </view>
          <view class="right">
            <view class="fun">
              2023年01月01日
            </view>
            <text class="icon-xiajiantou"></text>
          </view>
        </view>
        <view class="item-box">
          <view class="left">
            性别
          </view>
          <view class="right">
            <view class="fun">
              小王子
            </view>
            <text class="icon-xiajiantou"></text>
          </view>
        </view>
        <view class="item-box">
          <view class="left">
            年龄
          </view>
          <view class="right">
            <view class="fun">
              10岁
            </view>
          </view>
        </view>
        <view class="item-box">
          <view class="left">
            身高
          </view>
          <view class="right">
            <view class="fun">
              140cm
            </view>
    
          </view>
        </view>
        <view class="item-box">
          <view class="left">
            体重
          </view>
          <view class="right">
            <view class="fun">
              42kg
            </view>
            <text class="icon-xiajiantou"></text>
          </view>
        </view>
        <view class="textarea-box">
          <view class="header">
            备注（选填）
          </view>
          <view class="input-box">
            <text class="remain">{{remain}}/100</text>
            <textarea v-model="myFormData.textareaData" placeholder="可以记录一下宝宝的基本情况,或者有什么想对宝宝说的..."
              placeholder-style="color: #999" maxlength='100' @input="inputHandler" />
          </view>
        </view>
      </view>
    </view>
  </view>
  <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
    <scroll-view scroll-y="true" class="scroll-box">
      <view class="edit-box" :style="flag?{marginTop: '180rpx'}:''">
        <view class="top-box">
          <text class="save">保存</text>
          <text class="icon-xiangji1"></text>
          <view class="image-box">
            <image src="../../static/image/person/babyboy.png" mode=""></image>
          </view>
        </view>
        <view class="form-box">
          <view class="item-box">
            <view class="left">
              生日
            </view>
            <view class="right">
              <view class="fun">
                2023年01月01日
              </view>
              <text class="icon-xiajiantou"></text>
            </view>
          </view>
          <view class="item-box">
            <view class="left">
              性别
            </view>
            <view class="right">
              <view class="fun">
                小王子
              </view>
              <text class="icon-xiajiantou"></text>
            </view>
          </view>
          <view class="item-box">
            <view class="left">
              年龄
            </view>
            <view class="right">
              <view class="fun">
                10岁
              </view>
            </view>
          </view>
          <view class="item-box">
            <view class="left">
              身高
            </view>
            <view class="right">
              <view class="fun">
                140cm
              </view>
      
            </view>
          </view>
          <view class="item-box">
            <view class="left">
              体重
            </view>
            <view class="right">
              <view class="fun">
                42kg
              </view>
              <text class="icon-xiajiantou"></text>
            </view>
          </view>
          <view class="textarea-box">
            <view class="header">
              备注（选填）
            </view>
            <view class="input-box">
              <text class="remain">{{remain}}/100</text>
              <textarea v-model="myFormData.textareaData" placeholder="可以记录一下宝宝的基本情况,或者有什么想对宝宝说的..."
                placeholder-style="color: #999" maxlength='100' @input="inputHandler" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import myNavigationBarVue from "../../components/my-navigation-bar/my-navigation-bar.vue";
  import {
    computed,
    reactive,
    ref
  } from "vue";
 import useBounceFunc from "../../hooks/bounce.js";
 const {state, moveH, startH, endH} = useBounceFunc();
 
  const flag = computed(()=>{
    return getApp().globalData.isIphoneX;
  })

  const style = {
    textAlign: 'center',
    paddingLeft: 0,
    backgroundColor: "#D7D7D7"
  };
  const myFormData = reactive({
    birthday: '',
    gender: '',
    nickname: '',
    birthLong: '',
    textareaData: ''
  })
  const remain = computed(() => {
    return myFormData.textareaData.length;
  });
  const inputHandler = () => {
    console.log(myFormData.textareaData.length);
  }
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style scoped lang="scss">

.navbar{
  position: fixed;
  top: 63rpx;
  left: 30rpx;
  z-index: 100;
  font-size: 48rpx;
  font-weight: 500;
  color: #515151;
}
.scroll-box{
  height: 100vh;
}
  .edit-box {
    margin-top: 150rpx;
 
    .top-box {
      height: 310rpx;
      position: relative;
      padding: 45rpx 0;

      .icon-xiangji1 {
        position: absolute;
        font-size: 55rpx;
        font-weight: 600;
        top: 227rpx;
        left: 260rpx
      }

      .save {
        position: absolute;
        top: 30rpx;
        right: 30rpx;
        padding: 10rpx;
        border-radius: 20rpx;
        border: 3px solid #D7D7D7;
        font-weight: 550;
        color: #7D7D7D;
      }

      .image-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        border: 1px solid #7D7D7D;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .form-box {
      padding: 0 20rpx;
     

      .item-box {
        padding: 40rpx;
        background-color: #F2F2F2;
        border-radius: 10rpx;
        color: #6B6B6B;
        font-weight: 550;
        display: flex;
        justify-content: space-between;

        &:not(:first-child) {
          margin-top: 20rpx;
        }

        .left {}

        .right {
          display: flex;
          justify-content: space-around;
          align-items: center;

          .fun {
           
            margin-right: 30rpx;
            font-weight: 500;
          }

          .icon-xiajiantou {
            font-size: 55rpx;
            color: #E98E90;
          }
        }
      }

      .textarea-box {
        
        .header {
          padding: 40rpx 0;
          color: #6B6B6B;
          font-weight: 600;
        }

        .input-box {
          position: relative;
            padding-bottom: 120rpx;
          .remain {

            position: absolute;
            bottom: 140rpx;
            right: 50rpx;
            z-index: 10;
            color: #6B6B6B;
            font-weight: 550;
          }

          textarea {

            box-sizing: border-box;
            padding: 50rpx 40rpx;
            border-radius: 20rpx;
            width: 710rpx;
            background-color: #F2F2F2;


          }
        }
      }
    }

  }
</style>
